<template>
  <ul class="pagination">
    <li>
      <a :disabled="pagination.currentPage == 1" @click="setPage(1)">
      {{first}}
      </a>
    </li>
    <li>
      <a :disabled="pagination.currentPage <= 1" @click="setPage(pagination.currentPage-1)">
      {{previous}}
      </a>
    </li>
    <li>
      <a :disabled="pagination.currentPage == pagination.lastPage" @click="setPage(pagination.currentPage+1)">{{next}}</a>
    </li>
    <li>
      <a class="no-next" title="尚未确定总数" v-if="pagination.lastPage == null">{{last}}</a>
      <a v-else :disabled="pagination.currentPage == pagination.lastPage" @click="setPage(pagination.lastPage)">{{last}}</a>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    first: {
      type: String,
      default: '首页'
    },
    last: {
      type: String,
      default: '末页'
    },
    next: {
      type: String,
      default: '下一页'
    },
    previous: {
      type: String,
      default: '上一页'
    },
    pagination: Object,
    setPage: Function
  }
}
</script>
<style scoped lang="scss">
.pagination {
  display: inline-block;
  padding-left: 0;
  list-style: none;
  margin: 0;
  border-radius: 4px;
  & > li {
    display: inline-block;
    a {
      padding: 0.5em 0;
      border-color: #2dc3e8;
      border-bottom: none;
    }
    a.no-next {
      color: gray;
    }
    a[disabled] {
      color: gray;
      pointer-events: none;
    }
  }
}
</style>
